<template>
    <div class="contact">
        <!-- <div class="contact">
            <div class="hall">
                <p style="font-size:36px;font-weight: 600;">金巢展馆</p>
                <p style="font-size:16px;font-weight: 600;">——&nbsp;PAVLION</p>
                <picture id="picture">
                    <div  id="element">
                        <Float 
                            imgUrl="https://s1.ax1x.com/2022/08/08/vMIHEV.png"
                            :Xsize="50"
                            :Ysize="25"
                            :time="500"
                        ></Float>
                        
                    </div>
                </picture>
            </div>
            <div class="allCards">
                <div class="cards" v-for="item in list" :key="item.id">
                    <p style="font-size:30px;font-weight:600">{{item.title}}</p>
                    <p style="font-size:16px;font-weight:600">地址:{{item.address}}</p>
                    <p style="font-size:16px;font-weight:600">电话:{{item.tel}}</p>
                    <div style="margin-top:50px"><div class="btn" @click="address"><i class="icon"></i><span>地址导航</span></div></div>
                </div>
            </div>
        </div>
        <div class="jb"></div>
        <div class="fans">
            <div class="sf">
                <Fan text="随着近年来元宇宙概念的兴起、数字人IP也成为当下的风口。" url="https://www.gzcloudbeing.com/CloudBeing/page/img/background/p2/2.png"></Fan>
            </div>
            <div class="sf">
                <Fan text="随着近年来元宇宙概念的兴起、数字人IP也成为当下的风口。" url="https://www.gzcloudbeing.com/CloudBeing/page/img/background/p2/2.png"></Fan>
            </div>
            <div class="sf">
                <Fan text="随着近年来元宇宙概念的兴起、数字人IP也成为当下的风口。" url="https://www.gzcloudbeing.com/CloudBeing/page/img/background/p2/2.png"></Fan>
            </div>
        </div> -->
        <title-bar class="animate__animated wowNews animate__fadeInDown" eTitle='PAVILION丨金巢展馆'></title-bar>
        <div class="map">
             <el-carousel :interval="4000" :autoplay="false" type="card" height="600px" indicator-position="none">
                <el-carousel-item v-for="item in list" :key="item.id">
                <MapCards 
                    :title="item.title"
                    :address="item.address"
                    :tel="item.tel"
                />
                </el-carousel-item>
            </el-carousel>
            <!-- <div class="mapdiv">
                <iframe id="maps" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/1K9ifhoibY5"></iframe>
                <div class="mapx">
                    <div>PAVILION丨金巢展馆</div>
                    <div>地址：长沙市金巢灯饰有限公司</div>
                    <div>电话: 123456</div>
                </div>
            </div>
            <div class="mapdiv" style="transform: scale(1.2);">
                <iframe id="maps" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/1K9ifhoibY5"></iframe>
                <div class="mapx">
                    <div>PAVILION丨金巢展馆</div>
                    <div>地址：长沙市金巢灯饰有限公司</div>
                    <div>电话: 123456</div>
                </div>
            </div>
            <div class="mapdiv" >
                <iframe id="maps" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/1K9ifhoibY5"></iframe>
                <div class="mapx">
                    <div>PAVILION丨金巢展馆</div>
                    <div>地址：长沙市金巢灯饰有限公司</div>
                    <div>电话: 123456</div>
                </div>
            </div> -->
        </div>
        <div style="margin-top:150px">
        <title-bar class="animate__animated wowNews animate__fadeInDown" eTitle='CONTACT丨联系我们'></title-bar>
        </div>
        <div class="lian">
            <div v-for="(item,index) in lianList" :key="index">
                <img :src="item.img" alt="">
                <div class="title">{{item.title}}</div>
            </div>
        </div>
        <Btm></Btm>
    </div>
</template>

<script>
import MapCards from '@/components/mapCards.vue'
import Float from '@/components/float.vue';
import Fan from '@/components/fan.vue'
export default {
    components:{
    Float,
    Fan,
    MapCards
},
    data(){
        return{
            list:[
                {
                    id:1,
                    title:'长沙金巢',
                    address:'湘湖街道南湖大市场海威大厦36号金巢灯饰',
                    tel:'1234156748910'
                },
                {
                    id:2,
                    title:'长沙金巢',
                    address:'长沙市湘湖街道南湖大市场海威大厦36号金巢灯饰',
                    tel:'1234156748910'
                },
                {
                    id:3,
                    title:'长沙金巢',
                    address:'长沙市湘湖街道南湖大市场海威大厦36号金巢灯饰',
                    tel:'1234156748910'
                }
            ],
            lianList:[
                {
                    img:'https://s1.ax1x.com/2022/08/02/vE9xXj.png',
                    title:'Mobilde'
                },
                {
                    img:'https://s1.ax1x.com/2022/08/02/vE9j1g.png',
                    title:'Hours'
                },
                {
                    img:'https://s1.ax1x.com/2022/08/02/vE9vcQ.png',
                    title:'Address'
                }
            ]
        }
    },
    methods:{
        address(){
            window.open('https://map.baidu.com/search/%E9%95%BF%E6%B2%99%E5%B8%82%E9%87%91%E5%B7%A2%E7%81%AF%E9%A5%B0%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/@12581375.735,3255059.72,19z?querytype=s&da_src=shareurl&wd=%E9%95%BF%E6%B2%99%E5%B8%82%E9%87%91%E5%B7%A2%E7%81%AF%E9%A5%B0%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&c=179&src=0&wd2=%E9%95%BF%E6%B2%99%E5%B8%82%E8%8A%99%E8%93%89%E5%8C%BA&pn=0&sug=1&l=19&b=(13378634.095,3509974.07;13379594.095,3510443.07)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&sug_forward=a742cbfde4d6febfd6b74ed3&device_ratio=1','_self');
        }
    },
    mounted(){
        window.scrollTo(0,0);
    }
}
</script>

<style lang="scss" scoped>
.el-carousel--horizontal{
    width: 100%;
}
.map{
    width: 100%;
    // height: 300px;
    margin: auto;
    display: flex;
    .mapdiv{
        width: 100%;
        padding: 0 10px;
    }
}
.mapx{
    width: 80%;
    margin-left: 10%;
    padding: 10px 10%;
    box-shadow: 0 7px 15px 0px grey;
}
#maps{
    width:100%;
    height:250px;
}

.fans{
    height: 500px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    
}
    .contact{
        margin-top:150px;
    }   
    .hall{
        width:90%;
        margin:0 auto;
        color: white;
        font-weight: bold;
        padding: 50px 0;
    }
    picture img{
        width: 100%;
    }
    .allCards{
        width: 90%;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }
    .cards p{
        color:white
    }
    .btn{
        display: flex;
        width: 100px;
        border: 3px solid white;
        background: rgba(0, 0, 0, 0.08);
        color: white;
    }
    .btn:hover{
        filter: invert(100%);
        background-color: #000;
        border:  3px solid #000;
    }
    .icon{
        display: inline-block;
        width: 18px;
        height: 24px;
        background: url(http://www.fordcasa.com/bocstatic/web/css/../../web/img/local.png)no-repeat center center;
        background-size: contain;
        margin-right: 0.4rem;
    }
    span{
        display: inline-block;
        height: 24px;
        line-height: 24px;
    }
    .jb{
        height: 50px;
        // background: linear-gradient(to bottom, #BFB5B6, #ffffff);
    }
    .lian{
        margin: 70px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        div{
            width: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                height: 65px;
            }
            .title{
                height: 60px;
                line-height: 60px;
                width: 100%;
                text-align: center;
            }
        }
    }
</style>